<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
  <head>
	<title>用户登录</title>
	<link rel="stylesheet" href="css/css.css">
  </head>
  
  <body>
	<%
// 			//生成加密后的密码
// 			String username = "zhangsan";								//登录用户名
// 			String password = "1";
// 			String salt		= "login_fdsfj45349fd";						//加点料（盐）。此料应与登录验证LoginCheck.java中加的料相同
// 			String md5 = util.Md5.getMd5(username + password + salt);	//临时生成MD5加密结果。请复制粘贴到数据表tb_user，用于测试登录
// 			out.print(md5);												//将得到加密后的字符串：7F3E096131569A77E3D63EEE4B79DD30
	%>
	<%@ include file="header.jsp" %>	
   	<h3>用户登录</h3>
   	
   	<div style="width:250px; margin:0px auto; text-align:left;">
		<form action="LoginServlet" method="post">
		   	用户名：<input type="text" name="username" style="width:150px;">
		   	<br>
		   	密&emsp;码：<input type="password" name="password" style="width:150px;">
			<br>		
			验证码：<input type="text" name="code" maxlength="4"  style="width:50px;">&ensp;
			<a href="#"><img src="" id="imgCode" onclick="codeChange();" 
				style="vertical-align:middle; border:0px;"></a>
			<a href="#" style="font-size:small;" onclick="codeChange();">刷新</a>
			<br>
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;			
			<input type="submit" value="提交" onclick="return ajax();">	
		</form>
	</div>
	
	<div id="msg" class="msg">${ msg }</div>
	<br>
	<div class="note">
		<a href="registerServlet">
			没账号？点我注册~
		</a>
	</div>

	<%@ include file="footer.jsp" %>
  </body>
<script type="text/javascript">	

window.onload = codeChange();											//网页转载、后退时，将刷新验证码图片

function codeChange() {													//刷新验证码图片
	var t = (new Date()).getTime();										//将当前时间转换为毫秒
	document.getElementById("imgCode").src = "VerifyCodeNumChar?t=" + t;//添加时间参数为了能刷新图片
	document.getElementsByName("code")[0].value = "";					//清空输入框
	document.getElementsByName("code")[0].focus();						//获得焦点，插入光标定位在输入框中
}

function ajax() {														//应用Ajax技术实现登录
	if (checkInput() == false) {										//检查控件输入值的有效性
		return false;													//不在继续执行本ajax()方法
	}
	
	var username 	= document.getElementsByName("username")[0].value;	//根据name获取输入的值
	var password 	= document.getElementsByName("password")[0].value;
	var code 		= document.getElementsByName("code")[0].value;
	
	var url = document.getElementsByTagName("form")[0].action;			//根据标签名获取表单的action
	url += "?username=" + username;										//提交的参数
	url += "&password=" + password;
	url += "&code=" + code;
	//setMsg(arg); return false;
    
	var xhr = new XMLHttpRequest();     						//创建XMLHttpRequest对象	
	xhr.open('post', url, true);								//post方法，网址，异步
	xhr.send();         										//发送请求	
	xhr.onreadystatechange = function () {						//状态更改时执行
	    if (xhr.readyState == 4 && xhr.status == 200) {
	        setMsg(xhr.responseText); 							//显示成功返回的内容
	    } else {
	        //setMsg("XMLHttpRequest对象创建失败!");				//未成功
	    }
	}
	
	return false;	
}

function checkInput() {											//输入校验
	var username 	= document.getElementsByName("username")[0];
	var password 	= document.getElementsByName("password")[0];
	var code 		= document.getElementsByName("code")[0];

	if (username.value.trim() == "") {							//去除首尾空格
		setMsg("请输入用户名！");
		username.focus();
		return false;
	}	
	
	if (password.value.trim() == "") {
		setMsg("请输入密码！");
		password.focus();
		return false;
	}	
	
	if (code.value.trim() == "") {
		setMsg("请输入验证码！");
		code.focus();
		return false;
	}
	if (code.value.trim().length < 4) {
		setMsg("请输入4位的验证码！");
		code.focus();
		return false;
	}
	
	setMsg("");													//清空消息
	return true;												//验证通过
}
  
function setMsg(msg) {
	if (msg.substring(0, 10) == "@Redirect:") {					//截取前10个字符。需网页转向时
		var url = msg.substring(10); 							//得到main.jsp。截取第11个字符及之后的所有字符
		window.location.href = url;								//网页转向
		return;
	} else if (msg.substring(0, 13) == "@RefreshCode:") {		//截取前13个字符，需刷新验证码
		codeChange();											//刷新验证码
		msg = msg.substring(13); 								//得到后面的消息内容
	}
	     
	document.getElementById("msg").innerHTML = msg;				//显示消息
}
</script>
</html>
